<template>
  <div class="message-container" :class="{ 
    'user-message': isUser, 
    'ai-message': !isUser && !isSystemMessage,
    'system-message': isSystemMessage 
  }">
    <div v-if="!isUser && !isSystemMessage" class="avatar ai-avatar">
      <img :src="aiAvatar" alt="AI Avatar">
    </div>
    <div class="message-content" :class="{ 
      'markdown-content': !isUser,
      'message-bubble system-message': isSystemMessage
    }">
      <div class="message-header" v-if="!isUser && !isSystemMessage">
        <span class="ai-name">AI助手</span>
      </div>
      <div class="message-text" ref="messageText" v-html="formattedContent"></div>
      <div class="message-footer" v-if="!isSystemMessage">
        <div class="message-time">{{ formattedTime }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { marked } from 'marked';
import hljs from 'highlight.js';
import 'highlight.js/styles/vs2015.css'; // 导入一个适合代码的暗色主题

// 配置marked使用highlight.js
marked.setOptions({
  highlight: function(code, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return hljs.highlight(code, { language: lang }).value;
      } catch (e) {}
    }
    return hljs.highlightAuto(code).value;
  },
  gfm: true,                     // 启用Github风格的Markdown
  breaks: true,                  // 允许回车换行
  pedantic: false,               // 尽可能地兼容 markdown.pl
  smartLists: true,              // 使用更为时髦的列表行为
  smartypants: true              // 使用更为时髦的标点
});

export default {
  name: 'ChatMessage',
  props: {
    content: {
      type: String,
      required: true
    },
    isUser: {
      type: Boolean,
      default: false
    },
    isSystemMessage: {
      type: Boolean,
      default: false
    },
    avatarType: {
      type: String,
      default: 'default'
    },
    timestamp: {
      type: Number,
      default: () => Date.now()
    }
  },
  computed: {
    aiAvatar() {
      // 根据avatarType返回不同的AI头像
      switch(this.avatarType) {
        case 'lovemaster':
          return '/avatars/love-master.svg';
        case 'codemaster':
          return '/avatars/code-master.svg';
        case 'superagent':
          return '/avatars/super-agent.svg';
        default:
          return '/avatars/ai-default.svg';
      }
    },
    formattedTime() {
      const date = new Date(this.timestamp);
      const hours = date.getHours().toString().padStart(2, '0');
      const minutes = date.getMinutes().toString().padStart(2, '0');
      return `${hours}:${minutes}`;
    },
    formattedContent() {
      if (!this.content) return '';
      
      try {
        // 特殊处理代码块 - 先将代码块替换为占位符
        let processedContent = this.content;
        const codeBlocks = [];
        const outputBlocks = []; // 用于存储代码输出结果
        
        // 处理代码输出结果
        // 1. 首先匹配 "输出:" 或 "运行结果:" 后面的内容
        processedContent = processedContent.replace(/(输出:|运行结果:|执行结果:|输出结果:|结果:)\s*```([^`]*?)```/g, (match, label, content) => {
          const placeholder = `OUTPUT_BLOCK_PLACEHOLDER_${outputBlocks.length}`;
          outputBlocks.push({ label, content: content.trim() });
          return placeholder;
        });
        
        // 2. 匹配代码块之后的 "```" 非代码块 (无语言标识) - 可能是输出
        processedContent = processedContent.replace(/```(\w+)([\s\S]*?)```\s*```([^`]*?)```/g, (match, lang, code, output) => {
          const codePlaceholder = `CODE_BLOCK_PLACEHOLDER_${codeBlocks.length}`;
          const outputPlaceholder = `OUTPUT_BLOCK_PLACEHOLDER_${outputBlocks.length}`;
          
          codeBlocks.push({ language: lang, code: code.trim() });
          outputBlocks.push({ label: '运行结果', content: output.trim() });
          
          return `${codePlaceholder}\n${outputPlaceholder}`;
        });
        
        // 处理以```开头的代码块 (如```python)
        processedContent = processedContent.replace(/```(\w+)?\s*\n([\s\S]*?)```/g, (match, lang, code) => {
          const language = lang || 'text';
          const placeholder = `CODE_BLOCK_PLACEHOLDER_${codeBlocks.length}`;
          codeBlocks.push({ language, code: code.trim() });
          return placeholder;
        });
        
        // 处理特殊的```python这种不带换行的情况
        processedContent = processedContent.replace(/```(\w+)([^```]*?)```/g, (match, lang, code) => {
          if (!match.includes('CODE_BLOCK_PLACEHOLDER')) {
            const language = lang || 'text';
            const placeholder = `CODE_BLOCK_PLACEHOLDER_${codeBlocks.length}`;
            codeBlocks.push({ language, code: code.trim() });
            return placeholder;
          }
          return match;
        });
        
        // 先用marked处理非代码块部分
        let html = marked(processedContent);
        
        // 替换回代码块
        codeBlocks.forEach((block, index) => {
          const placeholder = `CODE_BLOCK_PLACEHOLDER_${index}`;
          html = html.replace(placeholder, this.generateCodeBlock(block.language, block.code));
        });
        
        // 替换回输出块
        outputBlocks.forEach((block, index) => {
          const placeholder = `OUTPUT_BLOCK_PLACEHOLDER_${index}`;
          html = html.replace(placeholder, this.generateOutputBlock(block.label, block.content));
        });
        
        return html;
      } catch (error) {
        console.error('Error formatting markdown:', error);
        return this.content;
      }
    }
  },
  methods: {
    // 生成代码块
    generateCodeBlock(language, code) {
      // 自定义代码块格式化
      const validLanguage = language || 'text';
      const languageFormatted = validLanguage.toLowerCase();
      const escapedCode = this.escapeHtml(code);
      const highlightedCode = hljs.highlightAuto(escapedCode, validLanguage !== 'text' ? [validLanguage] : undefined).value;
      
      // 生成唯一ID用于复制和下载按钮
      const blockId = 'code-' + Math.random().toString(36).substring(2, 10);
      
      return `
      <div class="code-block-container">
        <div class="code-block-header">
          <div class="code-language-label" data-language="${languageFormatted}">${languageFormatted}</div>
          <div class="code-actions">
            <button class="copy-button" onclick="this.textContent='已复制'; navigator.clipboard.writeText(document.getElementById('${blockId}').innerText); setTimeout(() => this.textContent='复制', 1500)">复制</button>
            <button class="download-button" onclick="this.textContent='已下载'; const blob = new Blob([document.getElementById('${blockId}').innerText], {type: 'text/plain'}); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'code.${languageFormatted}'; a.click(); URL.revokeObjectURL(url); setTimeout(() => this.textContent='下载', 1500)">下载</button>
          </div>
        </div>
        <pre class="code-block ${languageFormatted}"><code id="${blockId}">${highlightedCode}</code></pre>
      </div>
      `;
    },
    
    // 生成输出块
    generateOutputBlock(label, content) {
      // 对输出内容进行格式化
      const escapedContent = this.escapeHtml(content);
      const formattedContent = this.formatOutputContent(escapedContent);
      
      // 生成唯一ID用于复制按钮
      const outputId = 'output-' + Math.random().toString(36).substring(2, 10);
      
      return `
      <div class="output-block">
        <div class="output-title">${label}</div>
        <div id="${outputId}" class="python-output">${formattedContent}</div>
        <div class="code-actions" style="text-align: right; margin-top: 8px;">
          <button class="copy-button" onclick="this.textContent='已复制'; navigator.clipboard.writeText(document.getElementById('${outputId}').innerText); setTimeout(() => this.textContent='复制', 1500)">复制结果</button>
        </div>
      </div>
      `;
    },
    
    // 格式化输出内容
    formatOutputContent(content) {
      // 处理数组格式化 - 先处理数组，再处理其它
      let formatted = content;
      
      // 格式化数组 - 用自定义样式包装数组元素
      formatted = formatted.replace(/(\[)([^\[\]]*?)(\])/g, (match, openBracket, contents, closeBracket) => {
        // 处理数组内容
        const formattedContents = contents.split(',').map(item => {
          // 处理数字
          const trimmedItem = item.trim();
          if (/^\d+(\.\d+)?$/.test(trimmedItem)) {
            return `<span class="array-number">${trimmedItem}</span><span class="array-comma">,</span> `;
          }
          return `${trimmedItem}<span class="array-comma">,</span> `;
        }).join('').replace(/<span class="array-comma">,<\/span> $/, ''); // 移除最后一个逗号
        
        return `<span class="array-bracket">${openBracket}</span>${formattedContents}<span class="array-bracket">${closeBracket}</span>`;
      });
      
      // 对数字添加高亮 - 但不处理已经被处理过的数组内数字
      formatted = formatted.replace(/(?<!class="array-number">)(\b\d+(\.\d+)?\b)(?!<\/span>)/g, '<span class="output-number">$1</span>');
      
      // 高亮Python布尔值和None
      formatted = formatted.replace(/\b(True|False|None)\b/g, '<span class="boolean">$1</span>');
      
      // 高亮字符串
      formatted = formatted.replace(/"([^"]*)"/g, '<span class="string">"$1"</span>');
      formatted = formatted.replace(/'([^']*)'/g, '<span class="string">\'$1\'</span>');
      
      // 高亮Python字典语法
      formatted = formatted.replace(/(\{|\})/g, '<span class="object-brace">$1</span>');
      
      // 高亮汉字标签
      formatted = formatted.replace(/(原始数组|排序后数组|结果|数组):/g, '<span class="output-label">$1:</span>');
      
      // 高亮错误信息
      formatted = formatted.replace(/\b(Error|Exception|错误|异常|Failed|失败).*$/gm, '<span class="output-error">$&</span>');
      
      return formatted;
    },
    
    escapeHtml(text) {
      // HTML转义
      return text
        .replace(/&/g, "&amp;")
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
        .replace(/"/g, "&quot;")
        .replace(/'/g, "&#039;");
    }
  },
  mounted() {
    this.$nextTick(() => {
      if (this.$refs.messageText) {
        const codeBlocks = this.$refs.messageText.querySelectorAll('pre code');
        codeBlocks.forEach(block => {
          if (!block.parentNode.classList.contains('code-block')) {
            hljs.highlightElement(block);
          }
        });
      }
    });
  }
}
</script>

<style scoped>
.message-container {
  display: flex;
  margin-bottom: 24px;
  align-items: flex-start;
  width: 100%;
  animation: fadeIn 0.4s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.user-message {
  flex-direction: row-reverse;
  justify-content: flex-start;
}

.avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  border: 2px solid white;
  transition: transform 0.3s;
}

.avatar:hover {
  transform: scale(1.05);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ai-avatar {
  margin-right: 12px;
}

.user-avatar {
  margin-left: 12px;
}

.message-content {
  position: relative;
  padding: 16px 20px;
  border-radius: 18px;
  max-width: calc(100% - 120px);
  word-break: break-word;
  white-space: pre-wrap;
  font-size: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  text-align: left;
  transition: all 0.3s;
}

.message-content:hover {
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
}

.message-header {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
}

.ai-name {
  font-weight: 600;
  color: var(--primary-color, #1e88e5);
  font-size: 14px;
  letter-spacing: 0.3px;
}

.message-text {
  line-height: 1.6;
}

.message-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

.message-time {
  font-size: 11px;
  opacity: 0.7;
  user-select: none;
}

.user-message .message-content {
  background-image: linear-gradient(to bottom right, #e3f2fd, #bbdefb);
  color: #333;
  border: 1px solid rgba(30, 136, 229, 0.1);
  text-align: left;
}

/* 深色主题下的用户消息 */
:deep(.theme-dark) .user-message .message-content {
  background-image: linear-gradient(to bottom right, #2c3e50, #1a2634);
  color: #e0e0e0;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.ai-message .message-content {
  background-image: linear-gradient(to bottom right, white, #f9f9f9);
  color: #333;
  border: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 15px;
}

/* 深色主题下的AI消息 */
:deep(.theme-dark) .ai-message .message-content {
  background-image: linear-gradient(to bottom right, #37474f, #263238);
  color: #e0e0e0;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* 添加消息气泡小尾巴 */
.ai-message .message-content::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 18px;
  width: 16px;
  height: 16px;
  background: linear-gradient(to bottom right, white, #f9f9f9);
  transform: rotate(45deg);
  border-left: 1px solid rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  z-index: -1;
}

:deep(.theme-dark) .ai-message .message-content::before {
  background: linear-gradient(to bottom right, #37474f, #263238);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.user-message .message-content::before {
  content: '';
  position: absolute;
  right: -8px;
  top: 18px;
  width: 16px;
  height: 16px;
  background-image: linear-gradient(to bottom right, #e3f2fd, #bbdefb);
  transform: rotate(45deg);
  border-right: 1px solid rgba(30, 136, 229, 0.1);
  border-top: 1px solid rgba(30, 136, 229, 0.1);
  z-index: -1;
}

:deep(.theme-dark) .user-message .message-content::before {
  background-image: linear-gradient(to bottom right, #2c3e50, #1a2634);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* 代码块样式改进 */
:deep(.code-block-container) {
  margin: 16px 0;
  border-radius: 8px;
  overflow: hidden;
  background-color: #1a1f2e;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transition: all 0.3s;
  border: 1px solid rgba(99, 179, 237, 0.2);
  display: flex;
  flex-direction: column;
}

:deep(.code-block-container:hover) {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  border-color: rgba(99, 179, 237, 0.3);
  transform: translateY(-1px);
}

:deep(.code-block-header) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  background-color: #3182ce;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  width: 100%;
}

:deep(.code-language-label) {
  color: #fff;
  font-size: 14px;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.5px;
  background-color: #3182ce;
  padding: 8px 16px;
  text-align: left;
  flex: 1;
}

:deep(.code-actions) {
  display: flex;
  gap: 8px;
  padding-right: 12px;
  background-color: #3182ce;
}

:deep(.copy-button), :deep(.download-button) {
  background-color: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.2s;
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
}

:deep(.copy-button:hover), :deep(.download-button:hover) {
  background-color: rgba(255, 255, 255, 0.25);
}

:deep(.code-block) {
  margin: 0;
  padding: 18px;
  background-color: #1a1f2e !important;
  max-height: 500px;
  overflow: auto;
  font-family: 'JetBrains Mono', 'Fira Code', 'Source Code Pro', 'IBM Plex Mono', 'Consolas', 'Monaco', monospace;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0.3px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
  font-feature-settings: 'calt' 1, 'ss01' 1, 'ss02' 1, 'ss03' 1, 'ss04' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 语言特定代码块样式 */
:deep(.html.code-block) {
  background-color: #271B38 !important;
}

:deep(.css.code-block) {
  background-color: #1C2B3A !important;
}

:deep(.javascript.code-block),
:deep(.js.code-block) {
  background-color: #1E293B !important;
}

:deep(.typescript.code-block),
:deep(.ts.code-block) {
  background-color: #1E2937 !important;
}

:deep(.python.code-block),
:deep(.py.code-block) {
  background-color: #1A212E !important;
}

:deep(.java.code-block) {
  background-color: #1E2430 !important;
}

:deep(.c.code-block),
:deep(.cpp.code-block) {
  background-color: #1A2336 !important;
}

/* HTML语言高亮增强 */
:deep(.html .hljs-tag) {
  color: #E06C75 !important;
}

:deep(.html .hljs-name) {
  color: #E06C75 !important;
  font-weight: 500;
}

:deep(.html .hljs-attr) {
  color: #D19A66 !important;
}

:deep(.html .hljs-string) {
  color: #98C379 !important;
}

/* CSS语言高亮增强 */
:deep(.css .hljs-selector-tag) {
  color: #D19A66 !important;
}

:deep(.css .hljs-selector-class) {
  color: #E5C07B !important;
}

:deep(.css .hljs-selector-id) {
  color: #61AFEF !important;
}

:deep(.css .hljs-attribute) {
  color: #E06C75 !important;
}

:deep(.css .hljs-property) {
  color: #61AFEF !important;
}

:deep(.css .hljs-number) {
  color: #D19A66 !important;
}

:deep(.css .hljs-important) {
  color: #E06C75 !important;
}

/* JavaScript/TypeScript高亮增强 */
:deep(.javascript .hljs-keyword),
:deep(.typescript .hljs-keyword) {
  color: #C678DD !important;
}

:deep(.javascript .hljs-title.function_),
:deep(.typescript .hljs-title.function_) {
  color: #61AFEF !important;
}

:deep(.javascript .hljs-title.class_),
:deep(.typescript .hljs-title.class_) {
  color: #E5C07B !important;
}

:deep(.javascript .hljs-variable),
:deep(.typescript .hljs-variable) {
  color: #E06C75 !important;
}

:deep(.javascript .hljs-params),
:deep(.typescript .hljs-params) {
  color: #ABB2BF !important;
}

:deep(.javascript .hljs-literal),
:deep(.typescript .hljs-literal) {
  color: #56B6C2 !important;
}

:deep(.javascript .hljs-string),
:deep(.typescript .hljs-string) {
  color: #98C379 !important;
}

:deep(.javascript .hljs-comment),
:deep(.typescript .hljs-comment) {
  color: #7F848E !important;
  font-style: italic;
}

/* 代码字体渲染优化 */
:deep(.code-block), 
:deep(.output-block),
:deep(.inline-code) {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 为老旧浏览器添加字体回退 */
:deep(.code-block), 
:deep(.output-block),
:deep(.code-output),
:deep(.code-result) {
  font-family: 'JetBrains Mono', 'Fira Code', 'Source Code Pro', 'IBM Plex Mono', 'Consolas', 'Monaco', monospace;
}

/* 普通文本样式增强 */
.chat-message {
  font-family: 'Noto Sans SC', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  line-height: 1.6;
  letter-spacing: 0.2px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.message-content {
  letter-spacing: 0.01em;
  word-spacing: 0.05em;
  line-height: 1.75;
}

.message-content p {
  margin-bottom: 0.8em;
}

/* 中文文本特殊优化 */
.message-content:lang(zh),
.message-content:lang(zh-CN) {
  font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  line-height: 1.8;
  letter-spacing: 0.05em;
}

/* 中文标题优化 */
.message-content:lang(zh) h1,
.message-content:lang(zh) h2,
.message-content:lang(zh) h3,
.message-content:lang(zh) h4,
.message-content:lang(zh) h5,
.message-content:lang(zh-CN) h1,
.message-content:lang(zh-CN) h2,
.message-content:lang(zh-CN) h3,
.message-content:lang(zh-CN) h4,
.message-content:lang(zh-CN) h5 {
  font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* 引用内容使用衬线字体 */
.message-content blockquote {
  font-family: 'Noto Serif SC', 'Roboto', serif;
  border-left: 4px solid rgba(156, 39, 176, 0.5);
  padding-left: 1em;
  margin-left: 0;
  margin-right: 0;
  font-style: italic;
  color: #666;
}

.message-content:lang(zh) blockquote,
.message-content:lang(zh-CN) blockquote {
  font-family: 'Noto Serif SC', serif;
  line-height: 1.9;
}

/* 增强列表 */
.message-content ul li,
.message-content ol li {
  margin-bottom: 0.5em;
}

.message-content h1, 
.message-content h2, 
.message-content h3,
.message-content h4,
.message-content h5 {
  font-family: 'Roboto', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-weight: 600;
  margin: 1.2em 0 0.6em;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #222;
}

.message-content h1 {
  font-size: 1.8em;
  font-weight: 700;
}

.message-content h2 {
  font-size: 1.6em;
  border-bottom: 1px solid rgba(127, 127, 127, 0.2);
  padding-bottom: 0.3em;
}

.message-content h3 {
  font-size: 1.4em;
}

.message-content h4 {
  font-size: 1.2em;
}

.message-content p, 
.message-content li {
  font-family: 'Noto Sans SC', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

/* 维护主题颜色系统 */
.theme-dark .message-content h1, 
.theme-dark .message-content h2, 
.theme-dark .message-content h3,
.theme-dark .message-content h4,
.theme-dark .message-content h5 {
  color: #e0e0e0;
}

.theme-dark .message-content blockquote {
  color: #aaa;
  border-left-color: rgba(156, 39, 176, 0.5);
}

/* 代码特定语言样式调整 */
:deep(.python.code-block) {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
}

:deep(.java.code-block) {
  font-family: 'JetBrains Mono', 'Source Code Pro', monospace;
}

:deep(.javascript.code-block),
:deep(.typescript.code-block) {
  font-family: 'Fira Code', 'IBM Plex Mono', monospace;
}

:deep(.code-block::-webkit-scrollbar) {
  width: 8px;
  height: 8px;
}

:deep(.code-block::-webkit-scrollbar-track) {
  background: rgba(0, 0, 0, 0.2);
}

:deep(.code-block::-webkit-scrollbar-thumb) {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

:deep(.code-block::-webkit-scrollbar-thumb:hover) {
  background: rgba(255, 255, 255, 0.3);
}

/* 行内代码 */
:deep(.inline-code) {
  background-color: rgba(0, 0, 0, 0.15);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.9em;
  color: #63b3ed;
  text-shadow: none;
  border: 1px solid rgba(99, 179, 237, 0.3);
  letter-spacing: -0.2px;
}

:deep(.theme-dark) .inline-code {
  background-color: rgba(255, 255, 255, 0.1);
  color: #63b3ed;
}

/* 表格样式 */
:deep(.markdown-content table) {
  border-collapse: collapse;
  width: 100%;
  margin: 12px 0;
  font-size: 14px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

:deep(.markdown-content table th),
:deep(.markdown-content table td) {
  border: 1px solid #e0e0e0;
  padding: 8px 12px;
  text-align: left;
}

:deep(.theme-dark .markdown-content table th),
:deep(.theme-dark .markdown-content table td) {
  border: 1px solid #444;
}

:deep(.markdown-content table th) {
  background-color: #f5f5f5;
  font-weight: 600;
  color: #333;
}

:deep(.theme-dark .markdown-content table th) {
  background-color: #37474f;
  color: #e0e0e0;
}

:deep(.markdown-content table tr:nth-child(even)) {
  background-color: #f9f9f9;
}

:deep(.theme-dark .markdown-content table tr:nth-child(even)) {
  background-color: #263238;
}

:deep(.theme-dark .markdown-content table tr:hover) {
  background-color: #1a2634;
}

/* 响应式样式 */
@media (max-width: 576px) {
  .message-content {
    max-width: calc(100% - 70px);
    font-size: 14px;
    padding: 12px 16px;
    border-radius: 16px;
  }
  
  .avatar {
    width: 36px;
    height: 36px;
  }
  
  .ai-avatar {
    margin-right: 10px;
  }
  
  .user-avatar {
    margin-left: 10px;
  }
  
  :deep(.hljs) {
    padding: 12px !important;
    font-size: 13px;
  }
  
  :deep(.line-number) {
    font-size: 12px;
    padding: 0 8px;
  }
  
  :deep(.line-numbers) {
    padding: 12px 0;
    min-width: 32px;
  }
  
  .ai-message .message-content::before,
  .user-message .message-content::before {
    width: 12px;
    height: 12px;
    top: 15px;
  }
  
  .ai-message .message-content::before {
    left: -6px;
  }
  
  .user-message .message-content::before {
    right: -6px;
  }
  
  .message-container {
    margin-bottom: 16px;
  }
}

/* 移除之前添加的思考过程样式 */
.thinking-process,
.thinking-prefix,
.final-answer,
.answer-prefix {
  position: initial;
  padding: initial;
  border-left: none;
  margin: initial;
  color: inherit;
  font-size: inherit;
  font-weight: normal;
  background-color: initial;
  border-radius: initial;
  display: inline;
  animation: none;
}

/* 保留系统消息样式 */
.message-bubble.system-message {
  background-color: rgba(244, 67, 54, 0.1);
  border: 1px solid rgba(244, 67, 54, 0.3);
  color: #d32f2f;
  font-weight: 500;
  text-align: center;
  max-width: 80%;
  margin: 10px auto;
  padding: 10px 16px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(244, 67, 54, 0.1);
}

/* 自定义代码块样式 */
:deep(.custom-code-block) {
  margin: 15px 0;
  border-radius: 8px;
  overflow: hidden;
  background-color: #282c34;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

:deep(.custom-code-block:hover) {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
}

:deep(.code-header) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 15px;
  background-color: #21252b;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

:deep(.code-language) {
  color: #fff;
  font-size: 13px;
  font-family: 'Fira Code', monospace;
  text-transform: uppercase;
  font-weight: 600;
}

:deep(.code-actions) {
  display: flex;
  gap: 10px;
}

:deep(.copy-btn), :deep(.download-btn) {
  background-color: rgba(255, 255, 255, 0.1);
  color: #ddd;
  border: none;
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s;
}

:deep(.copy-btn:hover), :deep(.download-btn:hover) {
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
}

:deep(.code-content) {
  margin: 0;
  padding: 15px !important;
  background-color: #282c34 !important;
  border: none;
  border-radius: 0;
  font-family: 'Fira Code', 'Consolas', monospace;
  font-size: 14px;
  line-height: 1.5;
  overflow-x: auto;
  tab-size: 2;
}

:deep(.code-content::-webkit-scrollbar) {
  height: 8px;
  background-color: #282c34;
}

:deep(.code-content::-webkit-scrollbar-thumb) {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

:deep(.code-content::-webkit-scrollbar-thumb:hover) {
  background-color: rgba(255, 255, 255, 0.3);
}

/* 调整代码高亮颜色 */
:deep(.hljs) {
  background: #1a1f2e !important;
  color: #edf2ff !important; /* 基础文本颜色 - 更亮 */
}

/* Python特定语法高亮 */
:deep(.python) {
  color: #edf2ff !important;
}

:deep(.hljs-keyword),
:deep(.hljs-selector-tag) {
  color: #ff79c6 !important; /* 关键字颜色 */
  font-weight: 600;
}

:deep(.hljs-built_in),
:deep(.hljs-builtin-name),
:deep(.hljs-name) {
  color: #66d9ef !important; /* 内置函数颜色 */
  font-weight: 500;
}

:deep(.hljs-string),
:deep(.hljs-attr),
:deep(.hljs-attribute) {
  color: #f1fa8c !important; /* 字符串颜色 */
}

:deep(.hljs-number),
:deep(.hljs-literal) {
  color: #bd93f9 !important; /* 数字颜色 */
  font-weight: 500;
}

:deep(.hljs-comment) {
  color: #6ad5ff !important; /* 注释颜色 - 更亮 */
  font-style: italic;
}

:deep(.hljs-variable),
:deep(.hljs-params),
:deep(.hljs-tag) {
  color: #f8f8f2 !important; /* 变量颜色 - 纯白色 */
}

:deep(.hljs-function) {
  color: #50fa7b !important; /* 函数颜色 */
  font-weight: 500;
}

:deep(.hljs-operator) {
  color: #ff79c6 !important; /* 操作符颜色 */
}

:deep(.hljs-title) {
  color: #50fa7b !important; /* 标题颜色 */
  font-weight: 500;
}

:deep(.hljs-class) {
  color: #8be9fd !important;
  font-style: italic;
}

/* 普通文本和标识符加强 */
:deep(.hljs-name),
:deep(.hljs-attr),
:deep(.hljs-selector-class),
:deep(.hljs-selector-id),
:deep(.hljs-selector-attr),
:deep(.hljs-selector-pseudo) {
  color: #edf2ff !important; /* 更亮的文本颜色 */
}

/* 修复特定语法元素 */
:deep(.hljs-property),
:deep(.hljs-constant) {
  color: #bd93f9 !important;
}

/* 修复插值表达式和模板字符串 */
:deep(.hljs-template-variable) {
  color: #ffb86c !important;
}

/* 强化变量和标识符 */
:deep(.hljs-variable),
:deep(.hljs-selector-variable) {
  color: #f8f8f2 !important;
  font-weight: 400;
}

/* 特别针对代码中出现的变量名和标识符 */
:deep(.code-block) span:not(.hljs-keyword):not(.hljs-string):not(.hljs-comment):not(.hljs-number):not(.hljs-literal):not(.hljs-built_in) {
  color: #ffffff !important;
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.2);
}

/* Python特定元素 */
:deep(.python .hljs-decorator),
:deep(.python .hljs-meta) {
  color: #f1fa8c !important;
  font-weight: 500;
}

:deep(.python .hljs-comment) {
  color: #6ad5ff !important; /* Python中注释的颜色，更亮 */
  font-weight: 400;
}

/* 响应式样式 */
@media (max-width: 576px) {
  .message-content {
    max-width: calc(100% - 70px);
    font-size: 14px;
    padding: 12px 16px;
    border-radius: 16px;
  }
  
  :deep(.code-block) {
    padding: 12px;
    font-size: 13px;
  }
  
  :deep(.code-block-header) {
    padding: 6px 12px;
  }
}

/* 代码输出结果框样式优化 */
:deep(.output-block),
:deep(.code-output),
:deep(.code-result) {
  margin: 12px 0;
  padding: 14px 16px;
  background-color: #0f172a;
  border: 1px solid rgba(99, 179, 237, 0.25);
  border-left: 4px solid #3182ce;
  border-radius: 6px;
  font-family: 'IBM Plex Mono', 'JetBrains Mono', monospace;
  font-size: 14.5px;
  line-height: 1.5;
  color: #f8fafc;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
  text-rendering: optimizeLegibility;
}

/* 输出代码中数组格式化 */
:deep(.code-output .array),
:deep(.code-result .array) {
  color: #a5b4fc;
  letter-spacing: 0.05em;
}

:deep(.code-output .array-bracket),
:deep(.code-result .array-bracket) {
  color: #f1fa8c;
  font-weight: 500;
}

:deep(.code-output .array-number),
:deep(.code-result .array-number) {
  color: #bd93f9;
  font-weight: 500;
  letter-spacing: 0.1em;
  display: inline-block;
  margin: 0 1px;
}

:deep(.code-output .array-comma),
:deep(.code-result .array-comma) {
  color: #f8fafc;
  margin-right: 2px;
}

/* 代码块框标题本地化 */
:deep(.code-block-header .language-text) {
  content: "文本";
}

:deep(.code-block-header .code-language-label) {
  position: relative;
}

:deep(.code-block-header .code-language-label[data-language="text"]::after) {
  content: "文本";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: inherit;
}

:deep(.code-block-header .code-language-label[data-language="bash"]::after) {
  content: "命令行";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: inherit;
}

:deep(.code-block-header .code-language-label[data-language="sh"]::after) {
  content: "Shell";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: inherit;
}

:deep(.code-block-header .code-language-label[data-language="javascript"]::after) {
  content: "JavaScript";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: inherit;
}

:deep(.code-block-header .code-language-label[data-language="typescript"]::after) {
  content: "TypeScript";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: inherit;
}

:deep(.code-block-header .code-language-label[data-language="python"]::after) {
  content: "Python";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: inherit;
}

:deep(.code-block-header .code-language-label[data-language="java"]::after) {
  content: "Java";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: inherit;
}

:deep(.code-block-header .code-language-label[data-language="html"]::after) {
  content: "HTML";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: inherit;
}

:deep(.code-block-header .code-language-label[data-language="css"]::after) {
  content: "CSS";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: inherit;
}

/* 中文标签文字大小调整 */
:deep(.code-block-header .code-language-label::after) {
  font-size: 12px;
}

/* 运行结果标题 */
:deep(.output-title),
:deep(.result-title) {
  margin-bottom: 6px;
  font-weight: 600;
  color: #63b3ed;
  font-size: 14px;
  display: block;
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: 0.3px;
}

/* 输出内容中不同类型的文本 */
:deep(.output-success) {
  color: #34d399;
  font-weight: 500;
}

:deep(.output-error) {
  color: #f87171;
  font-weight: 500;
}

:deep(.output-warning) {
  color: #fbbf24;
  font-weight: 500;
}

:deep(.output-info) {
  color: #60a5fa;
}

/* 数字和单位的显示 */
:deep(.output-number) {
  color: #bd93f9;
  font-weight: 500;
  letter-spacing: 0.2px;
}

/* 输出结果中的变量和表达式 */
:deep(.output-variable) {
  color: #f1fa8c;
  font-style: italic;
}

/* 输出区滚动条样式 */
:deep(.output-block::-webkit-scrollbar),
:deep(.code-output::-webkit-scrollbar),
:deep(.code-result::-webkit-scrollbar) {
  height: 8px;
  width: 8px;
}

:deep(.output-block::-webkit-scrollbar-track),
:deep(.code-output::-webkit-scrollbar-track),
:deep(.code-result::-webkit-scrollbar-track) {
  background: rgba(0, 0, 0, 0.2);
}

:deep(.output-block::-webkit-scrollbar-thumb),
:deep(.code-output::-webkit-scrollbar-thumb),
:deep(.code-result::-webkit-scrollbar-thumb) {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 4px;
}

:deep(.output-block::-webkit-scrollbar-thumb:hover),
:deep(.code-output::-webkit-scrollbar-thumb:hover),
:deep(.code-result::-webkit-scrollbar-thumb:hover) {
  background: rgba(255, 255, 255, 0.35);
}

/* 任何输出框内的表格样式 */
:deep(.output-block table),
:deep(.code-output table),
:deep(.code-result table) {
  border-collapse: collapse;
  width: 100%;
  margin: 8px 0;
}

:deep(.output-block th),
:deep(.output-block td),
:deep(.code-output th),
:deep(.code-output td),
:deep(.code-result th),
:deep(.code-result td) {
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 6px 10px;
  text-align: left;
}

:deep(.output-block th),
:deep(.code-output th),
:deep(.code-result th) {
  background-color: rgba(0, 0, 0, 0.2);
  color: #63b3ed;
}

/* 命令行提示符样式 */
:deep(.prompt) {
  color: #34d399;
  font-weight: 600;
  margin-right: 4px;
}

/* 输出框行数 */
:deep(.output-line-numbers) {
  position: absolute;
  left: 0;
  top: 0;
  padding: 14px 4px;
  background-color: rgba(0, 0, 0, 0.2);
  color: #64748b;
  text-align: right;
  user-select: none;
}

:deep(.has-line-numbers) {
  padding-left: 30px;
  position: relative;
}

/* 增强运行结果中的对象、字典、列表等展示 */
:deep(.object-preview) {
  color: #f8fafc;
  font-family: 'Fira Code', monospace;
}

:deep(.object-key) {
  color: #63b3ed;
}

:deep(.object-value) {
  color: #f1fa8c;
}

:deep(.array-bracket),
:deep(.object-brace) {
  color: #ff79c6;
  font-weight: bold;
}

/* Python特定输出样式 */
:deep(.python-output) {
  font-family: 'Fira Code', monospace;
  color: #f8fafc;
}

:deep(.python-output .string) {
  color: #f1fa8c;
}

:deep(.python-output .number) {
  color: #bd93f9;
}

:deep(.python-output .boolean) {
  color: #ff79c6;
  font-weight: 600;
}

/* 数学公式字体优化 */
:deep(.katex) {
  font-size: 1.1em;
  font-family: 'KaTeX_Math', 'Times New Roman', serif !important;
  text-rendering: optimizeLegibility;
}

:deep(.katex .mathit) {
  font-family: 'KaTeX_Math', 'Times New Roman', serif;
  letter-spacing: 0.02em;
}

:deep(.katex .mathrm) {
  font-family: 'KaTeX_Main', 'Times New Roman', serif;
}

:deep(.katex .mathbf) {
  font-family: 'KaTeX_Main', 'Times New Roman', serif;
  font-weight: bold;
}

/* 表格样式美化 */
:deep(table) {
  width: 100%;
  margin: 1em 0;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  font-family: 'Noto Sans SC', 'Roboto', sans-serif;
}

:deep(th) {
  background-color: #f5f5f5;
  font-weight: 600;
  padding: 12px 15px;
  text-align: left;
  border-bottom: 2px solid #ddd;
  font-family: 'Noto Sans SC', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

:deep(td) {
  padding: 10px 15px;
  border-bottom: 1px solid #ddd;
  font-family: 'Noto Sans SC', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: 0.95em;
}

:deep(tr:last-child td) {
  border-bottom: none;
}

:deep(tr:hover) {
  background-color: rgba(0, 0, 0, 0.02);
}

/* 暗色主题表格 */
:deep(.theme-dark table) {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

:deep(.theme-dark th) {
  background-color: #2d3748;
  border-bottom: 2px solid #4a5568;
  color: #edf2f7;
}

:deep(.theme-dark td) {
  border-bottom: 1px solid #4a5568;
  color: #e2e8f0;
}

:deep(.theme-dark tr:hover) {
  background-color: rgba(255, 255, 255, 0.05);
}

/* 强调环境样式 */
:deep(.tip),
:deep(.note),
:deep(.warning),
:deep(.info) {
  padding: 1em;
  margin: 1em 0;
  border-left: 4px solid;
  border-radius: 4px;
  font-family: 'Noto Sans SC', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

:deep(.tip) {
  background-color: #ecfdf5;
  border-left-color: #10b981;
  color: #065f46;
}

:deep(.note) {
  background-color: #f8fafc;
  border-left-color: #3b82f6;
  color: #1e40af;
}

:deep(.warning) {
  background-color: #fff7ed;
  border-left-color: #f97316;
  color: #c2410c;
}

:deep(.info) {
  background-color: #f0f9ff;
  border-left-color: #0ea5e9;
  color: #0c4a6e;
}

/* 暗色主题强调环境 */
:deep(.theme-dark .tip) {
  background-color: rgba(16, 185, 129, 0.15);
  color: #10b981;
}

:deep(.theme-dark .note) {
  background-color: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
}

:deep(.theme-dark .warning) {
  background-color: rgba(249, 115, 22, 0.15);
  color: #f97316;
}

:deep(.theme-dark .info) {
  background-color: rgba(14, 165, 233, 0.15);
  color: #38bdf8;
}

/* 输出标签样式 */
:deep(.output-label) {
  color: #38bdf8;
  font-weight: 600;
  margin-right: 6px;
  font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  letter-spacing: 0.1em;
}

/* 优化数组样式 */
:deep(.array-bracket) {
  color: #f1fa8c;
  font-weight: 500;
  font-size: 1.1em;
  margin: 0 1px;
}

:deep(.array-number) {
  color: #bd93f9;
  font-weight: 500;
  letter-spacing: 0.05em;
  padding: 0 2px;
}

:deep(.array-comma) {
  color: #888;
  margin-right: 1px;
}
</style> 